<template>
  <div class="u-container">
    <div class="searcher">
      <a-form labelAlign="left" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="用户名称：">
              <a-input v-model:value="formState.username" placeholder="用户名称" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item label="电话号码：">
              <a-input v-model:value="formState.phone" placeholder="电话号码" />
            </a-form-item>
          </a-col>
          <a-col :sm="24" :md="12" :lg="8" :xl="6">
            <a-form-item :wrapperCol="{ span: 24 }">
              <a-tooltip>
                <template #title>刷新将会清空搜索条件。</template>
                <a-button type="primary" style="margin-right: 20px" @click="handleRefresh">
                  <template #icon><ReloadOutlined /></template>刷新
                </a-button>
              </a-tooltip>
              <a-button type="primary" @click="handleSearch">
                <template #icon><SearchOutlined /></template>查询
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table_main">
      <dynamic-table
        ref="tableRef"
        :columns="columns"
        :get-list-func="getSysUser"
        rowKey="id"
        :searchData="searchData"
        :row-selection="null"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { DynamicTable } from '@/components/dynamic-table';
import { columns } from './columns';
import { getSysUser } from '@/api/system/user';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons-vue';
import { deleteEmpty } from '@/utils/common';
const tableRef = ref<any>(null);
const formState = ref({});
const labelCol = { span: 7 };
const wrapperCol = { span: 14 };
const searchData = ref({
  selfStatus: 2
});
// 搜索
const handleSearch = () => {
  const params = deleteEmpty(formState.value);
  // 刷新表格数据
  tableRef.value.refreshTableData({ ...params, selfStatus: 2 });
};
// 刷新
const handleRefresh = () => {
  formState.value = {};
  // 刷新表格数据
  tableRef.value.refreshTableData({ pageSize: 10, pageStart: 1, selfStatus: 2 });
};
</script>
